<template>
  <div ref="chart" class="chart-container" style="width: 100%; height: 220px;"></div>
</template>

<script>
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'CarPositionChart',
  props: {
    chartData: Array,
    xAxis: Array
  },
  setup(props) {
    const chart = ref(null);
    const updateChart = () => {
      if (chart.value) {
        const myChart = echarts.init(chart.value);
        myChart.setOption({
          title: {
            text: '装卸载小车位置',
            textStyle: {
              color: '#ffffff',  // 字体颜色为白色
              fontSize: 14       // 调整字体大小
            },
            left: '2%',  // 向右移动
            top: '6%',   // 向下移动
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            // top: '18%',    // 调整顶部边距
            bottom: '12%', // 调整底部边距
            // left: '10%',   // 调整左侧边距
            // right: '10%'   // 调整右侧边距
          },

          xAxis: {
            type: 'category',
            data: props.xAxis,
            boundaryGap: false,
            axisLabel: {
              color: '#ffffff',
              interval: function (index) {
                // 每5个点显示一个标签，确保7个标签显示-->10
                return index % 10 === 0 ? props.xAxis[index] : '';
              },
              formatter: function (value) {
                if (value.includes(' ')) {
                  return value.split(' ')[1].substring(0, 5);
                } else {
                  return value.substring(0, 5);
                }
              }
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 3000,
            name: 'mm',
            nameLocation: 'middle',  // 单位位置设置为Y轴中间
            nameRotate: 90,  // 单位旋转90度倒着显示
            nameTextStyle: {
              color: '#ffffff',  // 单位颜色设置为白色
              padding: [0, 0, 40, 0],  // 调整单位的位置
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#ffffff'  // 将 Y 轴标签文字设置为白色
            },

          },
          //   series: [{
          //     data: props.chartData.map(item => item.value),
          //     type: 'line',
          //     itemStyle: {
          //       color: '#1f78b4' // 深蓝色
          //     }
          //   }]
          // });
          series: [{
            data: props.chartData.map(item => item.value),
            type: 'line',
            itemStyle: {
              color: '#1f78b4',
              opacity: 1
            },
            symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              width: 2
            },

            smooth: true
          }]
        });
      }
    };

    onMounted(() => {
      updateChart();
    });

    watch(() => [props.chartData, props.xAxis], () => {
      updateChart();
    });

    return {
      chart
    };
  }
});
</script>

<style scoped>
.chart-container {
  width: 95%; /* 调整容器宽度 */
  height: 250px; /* 调整高度 */
  border: 2px solid #1f78b4; /* 蓝色边框 */
  padding: 2px; /* 移除内边距 */
  border-radius: 5px; /* 可选：为边框添加圆角效果 */
}
</style>
